前言

今天我們將說明JavaScript中的箭頭函式。

說明

箭頭函式(Arrow Function)：

箭頭函示是在ES6新增的一種特殊函式運算式（function expression），其有著簡潔易撰寫的優點
箭頭函式語法：

() => expression
param => expression
(param1, param2...) => expression
param => {return expression}

語法解析：
箭頭函式可分為兩部分，參數(param)以及陳述式(expression)

• 當參數只有1個時，參數括號()可加可不加
• 當參數有0個或2個以上時，參數需添加括號()
• 當陳述式(expression)只有一行時，不需使用大括弧（{}）和return（此時會自動返回該表達式結果）
• 當陳述式(expression)有多行時，需使用大括弧（{}）和return

以下舉例，使用一般函式運算式時:

const add = function (a, b) {
  return a + b;
};

const sum = add(4,7)
console.log(sum) //11

當使用箭頭函式

// 使用箭頭函式創建 add 函式
const add = (a, b) => a + b;
const sum = add(4, 7);

const add1 = (a, b) => {
  return a + b;
}
const sum1 = add1(4, 7)
console.log(sum, sum1); // 11, 11

箭頭函式既然那麼方便，那是否在未來進行function expression都一律使用呢？
答案當然是否！

由於箭頭函式沒有自己的 this keyword(關於this keyword後續會再講解)
因此若要使用this keyword時，需要注意arrow function的使用方式